<template>
	<view>
		<block v-for="(item,index) in list" :key="index">
		  <view class="list__demand" @click="goto('/pages/demand/view', item.id)">
		    <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom-sm">
		      <view class="justify-content-item">
		        <view class="tn-flex tn-flex-col-center tn-flex-row-left">
		          <view>
		            <view class="tn-padding-right tn-text-bold tn-text-md">{{ item.title || '' }}</view>
		            <view class="tn-padding-top-sm tn-text-ellipsis-2 tn-color-gray">{{ item.description || '' }}</view>
		          </view>
		        </view>
		      </view>
		    </view>
		    
		    <block v-if="item.picture">
		      <view class="tn-padding-top-xs">
		        <image class="list__image--1 tn-margin-bottom-sm" :src="item.picture" lazy-load :lazy-load-margin="1" mode="aspectFill"></image>
		      </view>
		    </block>
				
				<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-sm">
					<view v-if="item.category" class="justify-content-item tn-text-center">
						<view class="list__label__item tn-float-left">
							<text class="list__label__item--prefix">#</text> {{ item.category.title || '' }}
						</view>
					</view>
					<view class="justify-content-item tn-flex tn-flex-col-center">
            <view class="tn-color-gray tn-text-sm">
              <text class="tn-icon-share-square tn-padding-right-xs"></text>
              <text class="tn-padding-right">{{ item.share_total }}</text>
              <text class="tn-icon-star tn-padding-right-xs"></text>
              <text class="tn-padding-right">{{ item.collection_total }}</text>
              <text class="tn-icon-praise tn-padding-right-xs"></text>
              <text class="">{{ item.approval_total }}</text>
            </view>
					</view>
				</view>
		  </view>
		</block>
	</view>
</template>

<script>
	import base from '@/common/mixin/base.js'
	import request from '@/common/request.js';

	export default {
		name: 'CxDemandHot',
		mixins: [base],
		data() {
			return {
				model: 'business/demand',
				list: [],
			}
		},
		created() {
			this.getHotData();
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/scss/common.scss';
</style>